<template>
  <v-lazy
    v-model="isActive"
    :options="{
      threshold: 0.5,
    }"
    transition="fab-transition"
  >
    <v-card
      class="mx-auto projectsItem-container rounded-lg"
      :class="{ small: isSmall }"
      width="96%"
    >
      <v-overlay
        color="rgba(199, 203, 211, 1)"
        absolute="absolute"
        :value="showOverlay"
        :class="{ disabled: showOverlay }"
      >
      </v-overlay>
      <header class="pointer" @click="toggleDetail">
        <v-toolbar min-height="64" flat>
          <template v-if="!isSmall">
            <div class="toolbar-left">
              <v-card-title class="card-title">
                {{ propItem.number }} - {{ propItem.customerName }}
              </v-card-title>
              <v-subheader class="toolbar-subtitle pr-1">
                <i>
                  Admin, last updates by
                  {{ propItem.updateDate }}
                  at
                  {{ propItem.updateTime }}
                </i>
              </v-subheader>
            </div>
            <v-spacer></v-spacer>
          </template>
          <div class="toolbar-right">
            <div class="toolbar-right-btn text-right">
              <v-btn small icon>
                <v-icon small color="grey">mdi-folder</v-icon>
              </v-btn>
              <v-btn small icon>
                <v-icon small color="grey">mdi-plus-thick</v-icon>
              </v-btn>
              <v-menu content-class="action-menu" offset-y>
                <template v-slot:activator="{ on }">
                  <v-btn v-on="on" small icon>
                    <v-icon small color="grey">mdi-dots-vertical</v-icon>
                  </v-btn>
                </template>
                <v-list flat class="action-list">
                  <v-list-item @click="deleteProject" class="list-item">
                    <v-list-item-title>
                      <v-list-item-icon>
                        <v-icon class="delete-icon icon">mdi-delete</v-icon>
                      </v-list-item-icon>
                      <span class="text"> Delete Project </span>
                    </v-list-item-title>
                  </v-list-item>
                  <v-list-item class="list-item">
                    <v-list-item-title>
                      <v-list-item-icon>
                        <v-icon class="icon">mdi-file-multiple</v-icon>
                      </v-list-item-icon>
                      <span class="text"> Copy Project </span>
                    </v-list-item-title>
                  </v-list-item>
                </v-list>
              </v-menu>
            </div>
            <template v-if="isSmall">
              <v-card-title class="pa-0 card-title">
                {{ propItem.number }} - {{ propItem.customerName }}
              </v-card-title>
              <v-subheader class="item-count px-0">
                <b>{{ projectSum }}</b> projects <b>{{ propItem.jobsSum }}</b
                >jobs <b>{{ propItem.tasksSum }}</b
                >tasks</v-subheader
              >
            </template>
            <div class="toolbar-right-progress">
              <v-progress-linear
                :value="propItem.progress"
                color="#eb9b31"
                background-color="#BABABC"
                height="16"
                class="progress-linear"
              ></v-progress-linear>
              <span>{{ propItem.progress }} %</span>
            </div>
          </div>
        </v-toolbar>
        <div class="d-flex" v-if="!isSmall">
          <v-subheader class="item-count">
            <b>{{ projectSum }}</b> projects <b>{{ propItem.jobsSum }}</b
            >jobs <b>{{ propItem.tasksSum }}</b
            >tasks
          </v-subheader>
        </div>
      </header>
      <ProjectsItemDetail
        :small="isSmall"
        :projectList="projectList"
        @change="changeProject"
        v-show="showDetail"
      />
      <Dialog v-model="dialog" width="480" title="Delete Project">
        <template #headerAppend>
          <v-icon @click="hideDialog" color="#fff" class="icon"
            >mdi-close</v-icon
          >
        </template>
        <v-card v-if="selectedProject">
          <DeleteProject :project="selectedProject"></DeleteProject>
        </v-card>
      </Dialog>
    </v-card>
  </v-lazy>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import ProjectsItemDetail from "@/components/Project/Projects/ProjectsItemDetail.vue";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import DeleteProject from "./DeleteProject.vue";
import { IProject, IProjectItem } from "@/components/Project/index";
@Component({
  components: {
    ProjectsItemDetail,
    DeleteProject,
    Dialog,
  },
  props: {
    width: String,
    item: {
      type: Object,
      default: () => ({}),
    },
  },
})
export default class ProjectsItem extends Vue {
  get propWidth() {
    return this.$props.width;
  }
  get isSmall() {
    return this.$props.width === "13%";
  }

  get propItem(): IProject {
    return this.$props.item;
  }

  get projectSum() {
    return this.propItem.projectList.length;
  }

  get showOverlay() {
    return (
      this.selectedProject &&
      !this.propItem.projectList.find(
        (item) => item.id === this.selectedProject.id
      )
    );
  }
  isActive = false;
  show = false;

  dialog = false;

  get projectList(): Array<IProjectItem> {
    return this.propItem.projectList;
  }

  showDialog() {
    this.dialog = true;
  }

  hideDialog() {
    this.dialog = false;
  }

  changeProject(job: IProjectItem) {
    this.selectedProject = job;
  }

  get selectedProject() {
    return this.$store.state.ProjectsStore.selectedProject;
  }

  set selectedProject(project: IProjectItem) {
    this.$store.commit("ProjectsStore/setSelectedProject", project);
  }

  deleteProject() {
    if (!this.selectedProject) {
      this.$Swal.fire({
        position: "center",
        icon: "warning",
        title: "Please select the project you want to delete",
        showConfirmButton: false,
        timer: 1500,
      });
      return;
    }
    this.showDialog();
  }

  copyProject() {
    console.log("copyProject");
  }

  showDetailValue = false;
  get showDetail() {
    if (this.selectedProject && !this.showOverlay) {
      return true;
    } else {
      return this.showDetailValue;
    }
  }

  set showDetail(val: boolean) {
    this.showDetailValue = val;
  }

  toggleDetail() {
    this.showDetail = !this.showDetail;
  }
}
</script>

<style lang="scss">
@import "@/components/Project/Projects/ProjectsItem.scss";
</style>
